<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" class="tl-dialog" width="500px" @open="open" @close="close" top="50px" :append-to-body="true" :modal-append-to-body="true">
    <div style="padding-bottom:10px">
      <!--表格渲染-->
      <el-scrollbar  :style="{ height: '600px' }" class="approval-main-container">
        <el-table ref="mainTable" class="tl-table tl-table-fix" v-loading="loading" :data="datas" border fit style="padding-right: 5px">
          <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
          <el-table-column prop="name" label="节点名称" min-width="150px" sortable="custom" sort-by="name" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="点亮剪裁" width="80px" align="center" header-align="center">
            <template slot-scope="scope">
              <i class="el-icon-error" :style="{ color: scope.row.skiped ? '#F56C6C' : '#ccc', cursor: 'pointer', fontSize: '22px', verticalAlign: 'middle' }" @click="change(scope.row)"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="tempSaveAll" :loading="loading">确认裁剪</el-button>
    </div>
  </el-dialog>
</template>

<script>
  /** mixins */
  import { mixin_ref_list } from '@tapui/mixins/mixin_ref_list'
  import { putAction, getAction, postAction } from '@tapui/utils/http'
  /** 子组件 */
  /** VUE配置 */
  export default {
    name: 'flowSkipInst',
    components: {},
    mixins: [mixin_ref_list],
    data() {
      return {
        description: '流程裁剪',
        // 默认Key字段名
        fieldDefaultKey: 'id',
        // 默认显示字段名
        fieldDefaultValue: 'name',
        // url配置
        url: {
          list: '/cbb/pmFlowSkip/queryFlowSkip',
          saveData: '/cbb/pmFlowSkip/saveData'
        },
        // 排序参数
        sorterInfo: {
          sidx: 'sortcode',
          sord: 'asc'
        }
      }
    },
    props: {
      flowId: {
        default: '',
        type: String
      },
      projectuucode: {
        default: '1',
        type: String
      }
    },
    methods: {
      change(row) {
        if (row.skiped) {
          this.$set(row, 'skiped', false)
        } else {
          this.$set(row, 'skiped', true)
        }
      },
      loadData(paramMap) {
        let params = this.getQueryParams()
        this.loading = true
        getAction(this.url.list, params)
          .then((res) => {
            if (res.success) {
              this.datas = res.result
            } else {
              this.$tap.alert(res.message)
            }
            this.loading = false
          })
          .catch((err) => {
            console.error(err)
          })
          .finally(() => {
            this.loading = false
          })
      },
      tempSaveAll() {
        this.$confirm('确定要保存裁剪信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = ''
          this.datas.forEach((item) => {
            if (item.skiped) {
              ids += ',' + item.id
            }
          })
          if (ids.length > 0) {
            ids = ids.substring(1)
          }
          let paraMap = {
            idlist: ids,
            flowid: this.flowId,
            projectuucode: this.projectuucode
          }
          this.loading = true
          postAction(this.url.saveData, paraMap).then((res) => {
            this.loading = false
            if (res.success) {
              this.$tap.message(res.message, 'success')
              this.$emit('refreshData')
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
        }).catch(() => {
        })
      }
    },
    created() {
      this.filtersInfo.flowid = this.flowId
      this.filtersInfo.projectuucode = this.projectuucode
    }
  }
</script>
<style scoped lang="scss">
  .approval-main-container /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>

